<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-09-23 09:20:17
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-11-05 09:41:26
 * @FilePath: \new-face-ordering-data-screen\src\components\screenCenterOne.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="screenCenterOne">
        <div class="bgImage"></div>
        <div class="centerTitle">当前就餐比例统计</div>
        <div class="listBox">
            <div class="items" v-for="(item, index) in list" :key="index">
                <div>{{ item.mealtime_1_rate }}%</div>
                <div>{{ item.faculty_name }}</div>
                <div>{{ item.grade_name }}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
interface PropsType {
    list?: any
}
const props = withDefaults(defineProps<PropsType>(), {
    list: []
})
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.screenCenterOne {
    height: 548px;
    position: relative;
    padding-top: 48px;

    .bgImage {
        width: 784px;
        height: 377px;
        background: url('@/assets/images/center.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto 30px auto; // 水平居中
    }

    .centerTitle {
        font-weight: bold;
        font-size: 21px;
        color: #FFFFFF;
        text-align: center;
        width: 256px; // 宽度为父元素的100%
        height: 64px;
        margin: auto;
        background: url('@/assets/images/center_title.png') no-repeat;
        background-size: 100% 100%;
        display: flex; // 使用flex布局
        justify-content: center; // 水平居中
        align-items: center; // 垂直居中
    }

    .listBox {
        .items {
            width: 168px;
            height: 180px;
            background: url('@/assets/images/data.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            text-align: center;
            font-weight: bold;
            font-size: 16px;

            div:nth-of-type(1) {
                font-weight: bold;
                font-size: 34px;
                margin-bottom: 10px;
                margin-top: 12px;
            }

            div:nth-of-type(2) {
                margin-bottom: 5px;
            }

        }

        .items:nth-of-type(1) {
            top: 20px;
            left: 174px;
        }

        .items:nth-of-type(2) {
            top: 156px;
            left: 25px;
        }

        .items:nth-of-type(3) {
            bottom: 67px;
            left: 153px;
        }

        .items:nth-of-type(4) {
            top: 21px;
            right: 174px;
        }

        .items:nth-of-type(5) {
            top: 156px;
            right: 25px;
        }

        .items:nth-of-type(6) {
            bottom: 67px;
            right: 153px;
        }
    }
}
</style>
